<template>
	<view class="container_afterSales">

		<view class="title">
			<text v-for="(item,index) in title" :key="index" :class="item.value===serviceType?'active':''"
				@click="clickTitle(item.value)"> {{item.label}} </text>
		</view>

		<view class="list" v-if="orderList.length">
			<view v-for="(item,index) in orderList" :key="index" class="item">
				<view class="one">
					<text>{{item.createTime}}</text>
					<text>{{item.serviceType==="RETURN_MONEY"?'仅退款':'退货退款'}}</text>
				</view>
				<view class="two">
					<view> <text>订单编号</text> <text>{{item.createTime}}</text> </view>
					<view> <text>退款原因</text> <text>{{item.reason}}</text> </view>
					<view> <text>售后状态</text> <text style="color:red">{{afterSalesStatus(item.serviceStatus)}}</text>
					</view>
					<view> <text>退款金额</text> <text>￥{{item.applyRefundPrice}}</text> </view>
				</view>
				<view class="four">
					<text @click="clickAfterSales(item)">查看详情</text>
				</view>
			</view>
		</view>

		<view class="list2" v-if="!orderList.length"> 暂时没有更多数据 </view>

		<view style="height:50rpx"> </view>

	</view>
</template>

<script>
	import {
		getAfterSalesList
	} from '@/api/order/index.js'
	import dicts from '@/config/dicts.js'


	export default {
		data() {
			return {
				title: [{
						label: "全部",
						value: "",
					},
					{
						label: "仅退款",
						value: "RETURN_MONEY",
					},
					{
						label: "退货退款",
						value: "RETURN_GOODS",
					},
				],
				orderList: [],
				pageNumber: 1,
				pageSize: 30,
				serviceType: '',
				pages: 0,
			}
		},
		onLoad() {
			this.getList()
		},
		// 监听触底
		onReachBottom() {
			if (this.pages > this.pageNumber) {
				this.pageNumber++
				this.getList()
			}
		},
		methods: {
			getList() {
				getAfterSalesList({
					serviceType: this.serviceType,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code === 200) {
						this.pages = res.data.pages
						this.orderList.push(...res.data.records)
					}
				})
			},
			clickTitle(val) {
				this.serviceType = val
				this.pageNumber = 1
				this.orderList = []
				this.getList()
			},
			// 售后状态
			afterSalesStatus(val) {
				return dicts.afterSales_status[val]
			},
			// 售后详情
			clickAfterSales(val) {
				console.log(111)
				uni.navigateTo({
					url: '/pages_user/afterSales/afterSalesInfo?sn=' + val.sn,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container_afterSales {
		width: 100%;
		min-height: 100vh;
		background: #f9f9f9;

		.title {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #f9f9f9;
			font-size: 32rpx;
			padding: 30rpx 0 23.06rpx 0;

			.active {
				color: #2770fb;
			}
		}

		.list {
			margin: 0 25rpx;

			.item {
				font-size: 29rpx;
				background: #ffffff;
				border-radius: 11rpx;
				margin-bottom: 25rpx;
				padding: 43.75rpx 0 0 0;

				.one {
					display: flex;
					justify-content: space-between;
					margin-bottom: 25.69rpx;
					padding: 0 36.11rpx 0 28.47rpx;

					text:nth-child(2) {
						color: #585858;
					}
				}

				.two {
					border-top: 1px solid #f8f8f8;
					border-bottom: 1px solid #f9f9f9;
					padding: 27.08rpx 36.11rpx 0 28.47rpx;
					color: #585858;

					view {
						margin-bottom: 32.64rpx;

						text:nth-child(1) {
							margin-right: 32.64rpx;
						}
					}
				}

				.four {
					padding: 18.75rpx 36.11rpx 18.06rpx 0;
					text-align: end;

					text {
						display: inline-block;
						width: 156rpx;
						height: 67rpx;
						line-height: 66rpx;
						font-size: 29rpx;
						border: 1px solid;
						border-radius: 33rpx;
						text-align: center;
						margin-left: 24.41rpx;
					}
				}
			}
		}

		.list2 {
			font-size: 30rpx;
			opacity: 0.6;
			margin: 60% 0 0 35%;
		}
	}
</style>